import React, { useState, useEffect } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { useNavigate, Link, Routes, Route, Navigate, Outlet, Router, useRoutes } from "react-router-dom";
import logo from '../logo.svg'
import { adminRoutes, mainRoutes } from '../roures/index'
import NotFound from "../pages/PageNotFound";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const routes = adminRoutes.filter(route => route.isShow)
// const routes = useRoutes(routes)
const GetRoutes = () => {
  let element = useRoutes(routes);
  return element
}
const createSubMenuComponents = (route) => {
  const children = route.children
  
  return (
    <SubMenu key={route.path} title={route.title}>
      {children.map(item => {
        if (!item.children) {
          return <Menu.Item key={item.path}>
            <Link to={item.path} >
              {item.title}
            </Link>
          </Menu.Item>
        }else{
          return createSubMenuComponents(item)
        }
      })}
    </SubMenu>
  )
};
function onOpenChange(openKeys) { }
// function change() {
//   console.log(routes)
// }
function Index(props) {
  const [openKeys, setOpenKeys] = useState(undefined);

  const change = () => { }

  useEffect(() => {
    console.log(document.location)
  })
  return (
    <Layout>
      <Header className="header" style={{ background: '#428bca' }}>
        <div className="logo">
          <img src={logo} alt='logo' width='50px' height='50px'></img>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            style={{ height: '100%', borderRight: 0 }}
            onClick={change}
            defaultSelectedKeys={['/admin/dashboard']}
          >
            {routes.map(route => {
              if (!route.children) {
                return (
                  // (route.children) ?
                  //   <SubMenu key={route.path} title={route.title}>
                  //     {route.children.map(item => {
                  //       return <Menu.Item key={item.path} >
                  //         <Link to={item.path} >
                  //           {item.title}
                  //         </Link>
                  //       </Menu.Item>
                  //     })
                  //     }
                  //   </SubMenu>
                  <Menu.Item key={route.path} >
                    <Link to={route.path} >
                      {route.title}
                    </Link>
                  </Menu.Item>)
              } else {
                return createSubMenuComponents(route)
              }

            })}
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <GetRoutes />

            {/* <Routes>
              {
                adminRoutes.map((item) =>
                   <Route key = {item.path} {...item}></Route>
                )
              }
      
            </Routes> */}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default Index
